.blog {
  max-width: 1340px;
  height: auto;
  display: flex;
  width: 80%;
  margin: 0 auto;


  .blog-main {
    flex: 2;
    margin-bottom: 30px;
    padding: 18px 17px 15px;
    border: 1px solid #eaeaea;

    .blog-top {
      margin-top: 15px;
      margin-bottom: 15px;
      border-bottom: 1px solid #eaeaea;
    }

    .blog-content {

      margin-top: 27px;

      .blog-item {
        margin: 0 0 13px;
        border-bottom: 1px double #f0f0f0;
        word-wrap: break-word;
        height: auto;
        padding-bottom: 20px;
        cursor: pointer;


        .title {
          padding-left: 17px;
          padding-top: 20px;
        }

        .content {
          width: 100%;
          max-width: 900px;
          background: #fff;
          margin-bottom: 30px;
          padding: 18px 17px 15px;
          word-break: break-all;

          p {
            color: #797878 !important;
          }
        }


        .entry-tags {
          margin: 17px 0 0;
          width: 100%;
          max-width: 100%;
          line-height: 30px;
          display: flex;

          .categories {
            float: left;
            margin-right: 1%;
            padding: 5px;
          }

          .categories:hover {
            background-color: #f3f8ff;

          }

          .right {
            float: right;
          }

          .tags {
            float: left;
            margin-right: 1%;
          }

          .clear {
            display: block;
          }

        }

        .title {
          margin-bottom: 15px;
          font-size: 23px;
          letter-spacing: -.03em;
          word-wrap: break-word;
          font-family: Verdana, Arial, Helvetica, sans-serif;
          font-weight: 700;
          color: #333;
          text-shadow: 0 1px 0 #fff;
          line-height: 1.1em;
        }

      }
    }
    .block{
      margin: 40px 41px 0;

      .evaluation-all {
        width: 100%;
        height: 64px;
        line-height: 64px;
        .evaluation-all-content {

          .evaluation-all-content-hea {
            display: flex;
            .evaluation-all-content-left {
              flex: 1;
              line-height: 64px;
              font-size: 48px;
              width: 73px;
              color: #FF7A3E;
              font-weight: bold;
              margin-right: 15px;

            }
            .evaluation-all-content-right{
              .el-rate{
                //line-height: 0;
                line-height: 50px;
              }
              flex: 8;
              line-height: 50px;
              .content-right-pj {
                font-size: 13px;
                color: #999999;
              }
            }
          }

        }
      }
      .evaluation-content{
        width: 100%;
        height: auto;
        margin-top: 50px;
        .content-item {
          height: auto;
          margin: 70px auto;
          .item-avatar {
            float: left;
            width: 40px;
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
          }

          .item-info{
            width: 100%;
            height: auto;
            .item-info-top{
              display: flex;
              width: 300px;
              .left {
                text-align: center;
                color: #333333;
                font-size: 13px;
                text-decoration: none;
                line-height: 20px;
                flex: 1;
              }
              .right{
                line-height: 24px;
                flex: 2;
              }
            }
            .item-info-center {
              color: #666666;
              font-size: 14px;
              position: relative;
              line-height: 24px;
              margin-bottom: 10px;
              padding-left: 60px;
              margin-top: 10px;
              word-break: break-word;
            }
            .item-info-bottom{
              .left {
                float: left;
                color: #999999;
                font-size: 13px;
                padding-left: 60px;
              }
              .right{
                margin-right: 15px;
                float: right;
                span{
                  color: #999999;
                  font-size: 13px;
                }
              }
            }
          }
        }
      }
    }

  }

  .blog-nav {
    border: 1px solid #eaeaea;
    border-left: none;
    flex: 1;
    margin-bottom: 30px;


    .blog-user {
      padding: 20px 25px 0;
      width: 100%;
      height: 80px;

      .user {
        .blog-user-img {
          float: left;

          img {
            width: 48px;
            border-radius: 50%;
          }
        }

        .blog-user-name {
          float: left;
          line-height: 48px;
          font-size: 14px;
          margin-left: 10px;
        }
      }



    }

    .blog-nav-top {
      margin: 0;
      padding: 20px 25px 0;


      p {
        background: none repeat scroll 0 0 #f2f2f2;
        font-size: 16px;
        margin-bottom: 12px;
        padding-left: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
        vertical-align: text-bottom;
        word-wrap: break-word;
        color: #333;
      }

      ul {
        padding: 0;
        margin: 0;

        li {
          background: url(https://learnercms.oss-cn-beijing.aliyuncs.com/course/2021/12/01/f4cdd587-bb0c-4c53-8a8c-7ae7cc1d3f16.png) no-repeat 0 16px;
          padding: 6px 0 6px 15px;
          height: 56px;

          .blog-nav-top-title {
            text-decoration: none;
            color: #333;
            font-size: 14px;
            line-height: 1.7;
          }

          .blog-nav-top-bottom {
            text-decoration: none;
            color: #333;
            font-size: 14px;
            line-height: 1.7;

            div {
              float: left;
              margin-right: 15px;
            }
          }
        }
      }
    }

  }

  ::v-deep .el-breadcrumb {
    margin-top: 25px;
  }
  ::v-deep img {
    max-width: 900px!important;
  }
}